<template>
	<view>
		<view class="fixed-top bg-white">
             <!-- <u-navbar :is-back="true" :is-fixed="true" title="产品上市预报" ></u-navbar> -->
			<view class="px-2 mt-2 pb-2 dfes">
				<!-- <i class="iconfont icon-jia text-8ED0F2 mr-2" @click="open('tabbar/index/predictionAddition')"></i> -->
				<u-button  class="mr-2 text-white bg-8ED0F2"  size="mini"
								shape="circle" @click="open('tabbar/index/predictionAddition')">新增</u-button>
				<u-search placeholder="请输入关键字 " height="60" border-color="#8ED0F2" search-icon-color="#8ED0F2"
					bg-color="#fff" v-model="keyword" :action-style="actionStyle"></u-search>
			</view>
			<scroll-view scroll-x class="tab-scroll" :scroll-into-view="scrollinto" :scroll-with-animation="true"
				:show-scrollbar="false">
				<view class="px-3 tab-item" v-for="(item,index) in tabBars" :id="'tab'+index"
					@click="changeTab(index,item.state, item.approvalState)" :key="index">
					<view class="font-16 dfex" :class="tabIndex === index ? 'text-8ED0F2 active':''">
						{{item.name}}
					</view>
				</view>
			</scroll-view>
			<u-gap height="20" bg-color="#f7f7f7"></u-gap>
		</view>

		<view class=" p-2" style="margin-top: 100px;">
			<swiper :current="tabIndex" @change="onChangeTab" style="height: 100vh;">
				<swiper-item v-for="(_,inx) in tabBars" :key="inx">
					<scroll-view scroll-y style="height: 100vh" :show-scrollbar="false" @scrolltolower="loadMore"
						@scrolltoupper="refresh">
						<view v-for="(item, index) in newlist" :key="index" class="pb-2 mt-2 content-item">
							<view class="show-dd pl-2 bg-white pt-2">
								<view class="dfes">
									<view class="font-14 text-333333 font-weight-bold">{{item.title}}</view>
									<view class="position-absolute text-FFC251 font-14" style="right: 10px;">
									    {{ item.state_dictText === '草稿箱' ? item.state_dictText : item.approvalState_dictText }}
									</view>

								</view>
								<view class="lineHight mt-2">
									<view>企业名称：{{item.agricultureUserId_dictText}}</view>
									<view>产品名称：{{item.productName}}</view>
									<view>提交时间：{{item.updateTime}}</view>
								</view>

								<view class="lineHight-3 text-right">
									<u-button
										v-if="item.approvalState_dictText === '已同意' || item.approvalState_dictText === '待审批' || item.approvalState_dictText === '已驳回' || item.state_dictText === '草稿箱'"
										class="mr-1 borRound text-78AB06" :plain="false" :hair-line="false" size="mini"
										shape="circle" @click="predictionDetails(item.id)">查看详情</u-button>

									<u-button v-if="item.approvalState_dictText === '待审批'"
										class="mr-1 borRound text-78AB06" :plain="false" :hair-line="false" size="mini"
										shape="circle" @click="returnApplication(item.id)">退回申请</u-button>

									<u-button
										v-if="item.approvalState_dictText !== '已同意' && item.approvalState_dictText !== '待审批'"
										class="mr-1 borRound text-78AB06" :plain="false" :hair-line="false" size="mini"
										shape="circle" @click="predictionEditor(item.id)">重新编辑</u-button>

									<u-button
										v-if="item.approvalState_dictText !== '已同意' && item.approvalState_dictText !== '待审批'"
										class="mr-1 borRound text-78AB06" :plain="false" :hair-line="false" size="mini"
										shape="circle" @click="returnDelete(item.id)">删除</u-button>
								</view>
							</view>

						</view>
						<view v-if="!hasMore && newlist.length > 0" class="text-center mt-3 mb-3">
							<view class="text-muted">没有更多数据了</view>
						</view>
						<view v-else-if="newlist.length === 0" class="text-center mt-3 mb-3">
							<view class="text-muted">暂无数据</view>
						</view>
						<view v-else class="text-center mt-3 mb-3">
							<view class="btn btn-primary">加载更多</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import $H from '@/common/free-lib/request.js';
	export default {
		data() {
			return {
				newlist: [],
				tabBars: [{
						"id": 1,
						"name": "全部",
						"state": null
					},
					{
						"id": 2,
						"name": "待审批",
						"approvalState": "approval"
					},
					{
						"id": 3,
						"name": "已发布",
						"approvalState": "success"
					},
					{
						"id": 4,
						"name": "已驳回",
						"approvalState": "reject"
					},
					{
						"id": 5,
						"name": "草稿箱",
						"state": "edit"
					},
				],
				scrollinto: "",
				tabIndex: 0,
				keyword: '',
				actionStyle: {
					color: '#8ED0F2'
				},
				form: {
					pageNo: 1,
					pageSize: 10,
					total: 0 // 总页数
				},
				hasMore: true, // 是否还有更多数据
				keyword: '', // 输入框中的关键字
				searchResults: [], // 搜索结果
				isSearching: false, // 是否正在搜索
				state: '',
				approvalState: '',

			};
		},
		onShow() {
			this.NewList()
			this.newlist = []
		},
		onLoad() {
			// this.NewList()
		},
		

		methods: {
			setDefaultPageConfig() {
				this.form.pageNo = 1
				this.form.pageSize = 10
				this.form.total = 0
			},
			search() {
				if (this.keyword.trim() === '') {
					// 如果关键字为空，则显示原始数据
					this.isSearching = false;
					return;
				}
				this.setDefaultPageConfig()
				this.newlist = []
				this.NewList()
			},
			NewList() {
				$H.get('/basisInform/listingPreview/agriculture/list', {
					state: this.state,
					approvalState: this.approvalState,
					...this.form,
					title: this.keyword.trim(),
				}, {}).then(res => {
					this.newlist = [...this.newlist, ...res.result.records];
					this.total = res.result.total;
					this.page++;
					this.hasMore = this.newlist.length < this.total; // 检查是否还有更多数据
				}).catch(error => {
					console.log(error)
				});
			},

			changeTab(index, state, approvalState) {
				if (this.tabIndex === index) return;
				this.tabIndex = index;
				this.scrollinto = "tabBars" + index;
				this.state = state;
				this.approvalState = approvalState;
				this.newlist = []
				this.setDefaultPageConfig()
				this.NewList();
			},
			onChangeTab({
				detail
			}) {
				const state = this.tabBars[detail.current].state;
				const approvalState = this.tabBars[detail.current].approvalState;
				this.changeTab(detail.current, state, approvalState);
			},

			// 加载更多
			loadMore() {

				if (this.form.pageNo * this.form.pageSize >= this.form.total) {
					this.hasMore = false;
					return;
				}
				this.form.pageNo++;
				// 请求数据
				this.NewList();
			},
			// 下拉刷新
			refresh() {
				// 重置页码为 1
				this.form.pageNo = 1;
				// 清空数据列表
				this.newlist = [];
				// 设置标记为有更多数据
				this.hasMore = true;
				// 重新请求数据
				this.NewList();
				// 结束下拉刷新动画
				uni.$emit('stopPullDownRefresh');
			},
			// 退回申请
			returnApplication(id) {
				const url = `/basisInform/listingPreview/agriculture/returnApplication?id=${id}`;
				$H.post(url, {}, {}).then(res => {
					if (res.success || res.status === 'success') {
						uni.showToast({
							title: res.message,
							icon: 'success'
						});
						this.NewList();
						this.newlist = [];
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				}).catch(error => {
					uni.showToast({
						title: "网络错误，请稍后再试",
						icon: 'none'
					});
				});
			},
			// 删除
			returnDelete(id) {
				const _this = this
				uni.showModal({
					title: '提示',
					content: '是否确认删除？',
					success: function(res) {
						if (res.confirm) {
							$H.del(
								`/basisInform/listingPreview/agriculture/delete?id=${id}`, {}, {
									token: true
								}
							).then((res) => {
								if (res.code === 200) {
									uni.showToast({
										title: res.message,
										icon: 'none',
									})
									_this.NewList();
									_this.newlist = [];
								} else {
									uni.showToast({
										title: res.message,
										icon: 'none',
									})
								}
							})
						} else if (res.cancel) {
							uni.showToast({
								title: '删除取消',
								icon: 'none',
							})
						}
					},
				})
			},


			open(path) {
				uni.navigateTo({
					url: '/pages/' + path
				})
			},
			predictionDetails(id) {
				uni.navigateTo({
					url: `/pages/tabbar/index/predictionDetails?id=${id}`
				})
			},
			predictionEditor(id) {
				uni.navigateTo({
					url: `/pages/tabbar/index/predictionEditor?id=${id}`
				})
			}

		}
	};
</script>

<style lang="scss" scoped>
	.tab-scroll {
		width: 100vw;
	}


	.tab-item {
		margin-left: 2px;
		display: inline-block;
		text-align: center;
		padding: 0 14px;
		line-height: 40px;

	}

	.active {
		border-bottom: 2px solid #8ED0F2;
	}
</style>